<template>
    <div style="height: 100%">
        <div class="MainLayoutArea" style="height: 100%;overflow-x: hidden;">
            <el-backtop target=".MainLayoutArea"  :visibility-height="0" :bottom="100" :right="65" style="font-size: 25px;">
                <div class="toBackTop">
                    UP
                </div>
            </el-backtop>


            <div class="frontTopBarStyle">
<!--                Header-->
                <FrontTopBar ref="frontTopBar"></FrontTopBar>
            </div>
<!--            主体-->
            <div class="mainComponent">

                <div style="height: 100%;width: 100%">
                    <el-row style="height: 100%">
<!--                        左侧区域-->
                        <el-col :span="4" class="sidebar_left">
                            <FrontFrameLeftArea ></FrontFrameLeftArea>
                        </el-col>
<!--                        查询博客-->
                        <el-col :span="16" class="main">
<!--                            <router-view @watchBlogView="watchBlogView"/>-->
                            <router-view  @closeTopBarRedPointState="closeTopBarRedPointState"/>
                        </el-col>
<!--                        右侧区域-->
                        <el-col :span="4" class="sidebar_right">
                            <FrontFrameRightArea ref="rightArea"></FrontFrameRightArea>

                        </el-col>
                    </el-row>

                </div>

            </div>



        </div>




    </div>

</template>

<script>

    import FrontTopBar from "@/components/FrontSystem/FrontTopBar";
    import FrontFrameLeftArea from "@/components/FrontSystem/FrontFrameLeftArea";
    import FrontFrameRightArea from "@/components/FrontSystem/FrontFrameRightArea";

    export default {
        name: "FrontFramework",
        components:{
            FrontTopBar,
            FrontFrameLeftArea,
            FrontFrameRightArea,

        },
        data(){
            return {
            }
        },
        created() {
        },
        methods:{
            // //监听是否跳转到博客展示界面，以动态展示评论功能
            // watchBlogView(){
            //     // this.$nextTick(()=>{
            //         this.$refs.rightArea.checkBlogView();
            //     // });
            // },
            //父组件调用子组件消除红点
            closeTopBarRedPointState(){
                this.$refs.frontTopBar.closeRedPoint();
            }
        }
    }

</script>

<style scoped>

    .mainComponent{
        /*height: calc(100vh - 61px);*/
    }

    .frontTopBarStyle{
        height: 61px;
        width: 100%;
    }
    .sidebar_left{
        height: 100%;
        padding: 5px;
        /*background: #0aaeb3;*/
    }
    .main{
        height: 100%;
        padding: 10px 20px 20px 20px;
        position: relative;
        z-index: 0;
        background: #f3f3f3;
    }
    .sidebar_right{
        height: 100%;
        padding: 5px;
        /*background: #8196e3;*/
    }

    .toBackTop{
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
    }





</style>
